今天想說說TabView 以及TabMenu 增加左右箭頭的
TabView有自己的scroll 但是有顯示上的問題

我先把左右箭頭建好，明天再開始魔改調整吧
時間不太夠 Q__Q

import React, { useState, useRef, useEffect } from "react";
import { TabMenu } from 'primereact/tabmenu';
import { MenuItem } from 'primereact/menuitem';
import { TabView, TabPanel } from 'primereact/tabview';

const TabCompnent: React.FC = () => {
  const [activeIndex, setActiveIndex] = useState<number>(0);

  const items: MenuItem[] = [
    { label: 'Dashboard', icon: 'pi pi-home' },
    { label: 'Transactions', icon: 'pi pi-chart-line' },
    { label: 'Products', icon: 'pi pi-list' },
    { label: 'Messages', icon: 'pi pi-inbox' },
    { label: 'Dashboard1', icon: 'pi pi-home' },
    { label: 'Transactions1', icon: 'pi pi-chart-line' },
    { label: 'Products1', icon: 'pi pi-list' },
    { label: 'Messages1', icon: 'pi pi-inbox' }
  ];
  let tabItems = [];
 
  return (
    <div>
      <div className="p-tabmenu-cus">
        <div className="p-leftbtn" onClick={handleMenuLeft} />
        <div ref={menuRef} style={{overflow:'hidden'}}><TabMenu model={items} activeIndex={activeIndex} onTabChange={(e) => setActiveIndex(e.index)} /></div>
        <div className="p-rightbtn" onClick={handleMenuRight}/>
      </div>
      <div className="p-tabview-cus">
        <div className="p-leftbtn" />
        <div ref={viewRef} style={{overflow:'hidden'}}><TabView pt={{ panelContainer: { hidden: true } }}>
          {items.map((tab: MenuItem) => {
            return (
              <TabPanel key={`${tab.label}_`} leftIcon={`${tab.icon} mr-2`} header={tab.label} />
            );
          })}
        </TabView></div>
        <div className="p-rightbtn" />
      </div>
    </div>
  );
}

export default TabCompnent;

css

.p-tabmenu-cus {
  display: flex;
  justify-content: space-between;
  .p-leftbtn {
    &::before {
      font-family: 'primeicons';
      content: "\e931";
      height: 50px;
      line-height: 50px;
    }
    &:hover {
      color: #81c784;
    }
  }
  .p-rightbtn {
    &::before {
      font-family: 'primeicons';
      content: "\e932";
      height: 50px;
      line-height: 50px;
    }
    &:hover {
      color: #81c784;
    }
  }
  .p-tabmenu {
    overflow: auto;
    margin: 0 10px;
  }
}

.p-tabview-cus {
  display: flex;
  justify-content: space-between;

  .p-leftbtn {
    &::before {
      font-family: 'primeicons';
      content: "\e931";
      height: 50px;
      line-height: 50px;
    }

    &:hover {
      color: #81c784;
    }
  }

  .p-rightbtn {
    &::before {
      font-family: 'primeicons';
      content: "\e932";
      height: 50px;
      line-height: 50px;
    }

    &:hover {
      color: #81c784;
    }
  }
  .p-tabview {
    overflow: auto;
    margin: 0 10px;
  }
}

那麼 明天見